Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.

Login Member

Materi Mata Kuliah

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

03 jam 10 menit 00 detik

02 jam 10 menit 00 detik

02 jam 09 menit 00 detik

02 jam 01 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 38 menit 00 detik

00 jam 10 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

Komponen UI Bootstrap

Bootstrap menyediakan berbagai komponen User Interface (UI) yang siap digunakan untuk membangun tampilan website dengan cepat dan konsisten. Komponen ini dirancang agar responsive, modern, dan mudah digunakan tanpa perlu banyak menulis CSS tambahan.

Beberapa komponen UI yang sering digunakan antara lain:

  • Button
  • Card
  • Alert
  • Badge
  • List group

Dengan memanfaatkan komponen ini, developer dapat membuat tampilan website yang lebih profesional.

1. Button

Button digunakan untuk membuat tombol interaksi seperti submit, login, atau navigasi.

Bootstrap menyediakan berbagai variasi button berdasarkan warna.

Contoh penggunaan:

 
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
 

Penjelasan:

  • btn → class dasar button
  • btn-primary → warna biru
  • btn-success → warna hijau
  • btn-danger → warna merah

Button juga bisa dibuat dalam berbagai ukuran:

 
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>
 

2. Card

Card digunakan untuk menampilkan konten dalam bentuk kotak yang rapi, biasanya digunakan untuk:

  • produk
  • artikel
  • profil
  • informasi

Contoh penggunaan:

 
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Isi konten card</p>
<a href="#" class="btn btn-primary">Detail</a>
</div>
</div>
 

Penjelasan:

  • card → container utama
  • card-body → isi konten
  • card-title → judul
  • card-text → deskripsi

3. Alert

Alert digunakan untuk menampilkan pesan kepada pengguna seperti:

  • notifikasi sukses
  • error
  • peringatan

Contoh penggunaan:

 
<div class="alert alert-success">
Data berhasil disimpan!
</div>

<div class="alert alert-danger">
Terjadi kesalahan!
</div>
 

Jenis alert:

  • alert-success → sukses
  • alert-danger → error
  • alert-warning → peringatan
  • alert-info → informasi

4. Badge

Badge digunakan untuk memberikan label kecil atau penanda informasi.

Biasanya digunakan untuk:

  • notifikasi
  • jumlah pesan
  • status

Contoh penggunaan:

 
<h3>Pesan <span class="badge bg-primary">5</span></h3>
 

Badge juga bisa digunakan dalam button:

 
<button class="btn btn-primary">
Notifikasi <span class="badge bg-light text-dark">3</span>
</button>
 

5. List Group

List group digunakan untuk menampilkan daftar item secara terstruktur.

Contoh penggunaan:

 
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
 

List group juga dapat dibuat aktif atau interaktif:

 
<ul class="list-group">
<li class="list-group-item active">Item aktif</li>
<li class="list-group-item">Item lainnya</li>
</ul>
 

Kesimpulan

Komponen UI Bootstrap seperti button, card, alert, badge, dan list group sangat membantu developer dalam membangun tampilan website yang modern dan interaktif dengan cepat. Dengan menggunakan komponen ini, developer tidak perlu membuat desain dari awal karena Bootstrap sudah menyediakan style yang siap pakai. Penguasaan komponen UI ini sangat penting untuk mempercepat proses pengembangan website dan meningkatkan kualitas tampilan.

Report Error